<template>
  <f7-page login-screen>
    <f7-navbar>
      <f7-link slot="nav-left" raised panel-open="left">
        <f7-icon f7="person"></f7-icon>
      </f7-link>
      <f7-nav-title>Hotel</f7-nav-title>
    </f7-navbar>
    <div class="lunbo">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img src="@/assets/reservation/hotel.jpg" object-fit="cover" width="100%" height="100%">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="@/assets/reservation/hotel.jpg" object-fit="cover" width="100%" height="100%">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="@/assets/reservation/hotel.jpg" object-fit="cover" width="100%" height="100%">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="div1">
      <div class="back1">
        <div class="div2">
          <img src="@/assets/backgroundhome/ruzhu.svg" class="img2" @click="ruzhu">
          <p>入住</p>
        </div>
        <div class="div2">
          <img src="@/assets/backgroundhome/tuifang.svg" class="img2" @click="tuifang">
          <p>退房</p>
        </div>
      </div>
      <div class="back2" style="height: 40%;">
        <div class="gongneng">
          <p class="p1">功能服务</p>
        </div>
        <div class="div4">
          <div class="div3">
            <img src="@/assets/backgroundhome/fangxing.svg" @click="fangxing" class="img1">
            <p>房型</p>
          </div>
          <div class="div3">
            <img src="@/assets/backgroundhome/chaxun.svg" @click="charen" class="img1">
            <p>查人</p>
          </div>
          <div class="div3">
            <img src="@/assets/backgroundhome/tongji.svg" @click="tongji" class="img1">
            <p>统计</p>
          </div>
        <div class="div3">
          <img src="@/assets/backgroundhome/fanghao.svg" class="img1" @click="guanfang">
          <p>官房</p>
        </div>
        </div>
      </div>
      <div class="hotel">
        <p class="p2">酒店注意事项</p>
      </div>
      <div>
        <hotelmessage></hotelmessage>
      </div>
    </div>
  </f7-page>
</template>
<script>
import hotelmessage from "@/components/hotelmessage";
import axios from "axios";
export default {
  data() {
    return {};
  },
  components: {
    hotelmessage
  },
  mounted() {
    this.selectName();
  },
  methods: {
    selectName() {
      const self = this;
      const app = self.$f7;
      URL = "/caofuying/user/selectName";
      axios
        .get(URL, {
          params: {
            Username: this.$store.state.apiLogin.Username,
            Password: this.$store.state.apiLogin.Password
          }
        })
        .then(r => {
          const { data } = r;
          if (data != null) {
            let apiGeren = {
              RealName: data
            };
            this.$store.commit("setapiGeren", apiGeren);
          } else {
            app.dialog.alert("服务器错误");
          }
        });
    },
    ruzhu() {
      this.$f7router.navigate("/checkinhome/");
    },
    tuifang() {
      this.$f7router.navigate("/checkoutroom/");
    },
    guanfang() {
      this.$f7router.navigate("/theroomlist/");
    },
    fangxing() {
      this.$f7router.navigate("/roomhome/");
    },
    charen() {
      this.$f7router.navigate("/checkpeoplesearch/");
    },
    tongji() {
      this.$f7router.navigate("/statisticalhome/");
    },
    xuzhi() {
      this.$f7router.navigate("/hotel/");
    }
  }
};
</script>
<style scoped>
.lunbo {
  height: 30%;
}
.img1 {
  width: 50%;
}
.img2 {
  width: 40%;
}
.div2 {
  width: 49%;
  text-align: center;
  padding-top: 10px;
  float: left;
  border-right: 1px solid #e3e3e3;
  height: 110px;
}
.div3 {
  width: 24.7%;
  text-align: center;
  float: left;
  display: table-cell;
  border-right: 1px solid #e3e3e3;
  padding-top: 10px;
  height: 100px;
}
.div1 {
  height: 50%;
}
.back1 {
  height: 35%;
  border-top: 1px solid #e3e3e3;
  height: 106px;
}
.button {
  background-color: red;
}
.p1 {
  padding-left: 5%;
  border-top: 1px solid #e3e3e3;
  padding-top: 13px;
  font-weight: 1000;
  line-height: 10px;
}
.div4 {
  border: 1px solid #e3e3e3;
  height: 110px;
  border-right: none;
  border-left: none;
}
.p2 {
  padding-left: 5%;
  padding-top: 35px;
  font-weight: 1000;
  line-height: 10px;
}
.hotel {
  padding-top: 13px;
  border: 1px solid #e3e3e3;
  border-right: none;
  border-left: none;
  border-top: none;
}
.div3:last-of-type {
  border-right: none !important;
}
.div2:last-of-type {
  border-right: none !important;
}
</style>
